<template>
<div class="img-ch-box">
    <div class="img-ch-info" :style="{color:infoColor}">{{info}}</div>
    <div class="img-ch-img">
        <img :src="chImgSrc" alt="中文验证图片" class="ch-img" @click="cnClick">
        <div class="refresh">
            <img :src="refreshImg" alt="刷新按钮" @click="refresh">
            <span class="btn-info">点击刷新<b></b></span>
        </div>
        <div class="close">
            <img :src="closeImg" alt="关闭按钮" @click="close">
            <span class="btn-info">点击关闭<b></b></span>
        </div>
    </div>
    <button @click="check_virtual">确&emsp;定</button>
</div>
</template>

<script>
import refreshImg from '../assets/refresh.svg'
import closeImg from '../assets/close.svg'

export default {
  data() {
    return {
        info:'',
        chImgSrc:'',
        refreshImg:refreshImg,
        closeImg:closeImg,
        //点击次数
        num:0,
        //坐标
        coord:'',
        infoColor:'#cdcdcd'
    }
  },
  created(){
      this.refresh()
  },
  methods:{
    refresh(){
        this.$ajax(
            'getimg_cn',
            {appid:this.$store.state.appid,operation:this.$store.state.operation,identifying:this.$store.state.identifying},
            (res)=>{
                this.chImgSrc = 'data:image/png;base64,' + res.data.data.img;
                this.info = res.data.data.msg;
                this.infoColor = "#cdcdcd";
                this.num = 0;
                this.coord = ''
            },
            (erro)=>{}
        )
    },
    cnClick(e){
        this.num = this.num + 1;
        if(this.num < 3){
            this.coord = this.coord + e.offsetX + '_' + e.offsetY + '-';
            console.log('coord:',this.coord)
        }else if(this.num == 3){
            this.coord = this.coord + e.offsetX + '_' + e.offsetY
            console.log('coord3:',this.coord)
            // this.check_virtual()
        }
    },
    check_virtual(){
        this.$ajax(
            'check_virtual',
            {
                appid:this.$store.state.appid,
                operation:this.$store.state.operation,
                type:this.$store.state.type,
                identifying:this.$store.state.identifying,
                value:this.coord,
            },
            (res)=>{
                if(res.data.data){
                  this.info = "验证通过";
                  this.infoColor = "#006c21";
                  let save_value = this.coord;
                  this.$emit('validation-finish',save_value);
                }else{
                    this.info = "验证未通过";
                    this.infoColor = "#d81e06"; 
                    setTimeout(()=>{
                        this.refresh()
                    },500)
                }
            },
            (error)=>{}
        )
    },
    close(){
        let closeState = true;
        this.$emit('close-state',closeState);
        window.parent.postMessage({
        'event':'validationCancel',
        'data':{
            operation:this.$store.state.operation
        }
        },'*')  
    }
  }
  
};
</script>

<style scoped>
.img-ch-box{
    min-height: 300px;
}
.img-ch-info{
    padding: 10px 0;
}
.img-ch-img{
    position: relative;
}
.refresh{
    position: absolute;
    top: 40px;
    right: 5%;
}
.refresh img{
    width: 25px;
    height: auto;
}
.close{
    position: absolute;
    top: 0;
    right: 5%;
}
.close img{
    width: 25px;
    height: auto;
}
button{
    background: none;
    border: 1px solid #fff;
    padding: 5px 20px;
    border-radius: 3px;
    outline: none;
    color:#fff;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 15px
}
.btn-info{
    display: inline-block;
    color: #fff;
    font-size: .5rem;
    position: absolute;
    top: -23px;
    right: 5px;
    background: rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 3px;
    opacity: 0;
}
.btn-info b{
    border-width: 3px;
    border-color:rgba(0,0,0,0.5) transparent transparent transparent;
    border-style: solid;
    position: absolute;
    right: 5px; 
    top:100%;
}
.close:hover .btn-info,.refresh:hover .btn-info{
    opacity: 1;
}
</style>
